import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

void main() => runApp(MainPage());

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: MainPageWidget(),
      ),
    );
  }
}

class MainPageWidget extends StatefulWidget {
  @override
  _MainPageWidgetState createState() => _MainPageWidgetState();
}

class _MainPageWidgetState extends State<MainPageWidget> {
  var _scrollController = ScrollController();
  var _oldShowState = false;
  var _showNarrow = false;

  bool _onNotification(ScrollNotification notification) {
    print("_scrollController.offset == $_scrollController.offset");

    bool show = _scrollController.offset > 100;
    if (show != _oldShowState) {
      _oldShowState = show;
      setState(() {
        _showNarrow = show;
      });
    }
    return true;
  }

  @override
  Widget build(BuildContext context) {
    ScreenUtil.init(context, width: 1080, height: 1920, allowFontScaling: false);
    return NotificationListener(
      onNotification: _onNotification,
      child: CustomScrollView(
        controller: _scrollController,
        slivers: <Widget>[
          //AppBar，包含一个导航栏
          SliverAppBar(
            backgroundColor: Colors.grey,
            title: Container(
              height: 80.h,
              width: 800.w,
              color: Colors.red,
            ),
//            leading: Icon(Icons.star),
            actions: <Widget>[
              Icon(Icons.star),
              SizedBox(
                width: 20.w,
              ),
              Container(
                child: Icon(Icons.message),
                margin: EdgeInsets.only(right: 50.w),
              ),
            ],
            pinned: true,
            expandedHeight: 500.h,
            flexibleSpace: FlexibleSpaceBar(
              stretchModes: <StretchMode>[StretchMode.zoomBackground],
              collapseMode: CollapseMode.parallax,
              background: ConstrainedBox(
                constraints: BoxConstraints.expand(),
                child: Stack(
                  overflow: Overflow.visible,
                  alignment:Alignment.center,
                  children: <Widget>[
                    ConstrainedBox(
                      constraints: BoxConstraints.expand(),
                      child: Image.asset(
                        "assets/images/cover_img.jpg",
                        fit: BoxFit.cover,
                      ),
                    ),
                    Positioned(
                      bottom: -18,
                      left: 20,
                      right: 20,
                      child: Container(
                        padding: EdgeInsets.only(bottom: 8, top: 8, left: 8, right: 8),
                        child: Row(
                          children: <Widget>[
                            Icon(Icons.search),
                            Text("请输入关键字查询"),
                          ],
                        ),
                        decoration: new BoxDecoration(
                          color: Color(0xFFFFFFFF),
                          borderRadius: new BorderRadius.circular((5.0)),
                        ),
//              padding: EdgeInsets.all(8.0),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),

          SliverPadding(
            padding: const EdgeInsets.all(8),
            sliver: SliverGrid(
              //Grid
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2, //Grid按两列显示
                mainAxisSpacing: 10.0,
                crossAxisSpacing: 10.0,
                childAspectRatio: 4.0,
              ),
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  //创建子widget
                  return Container(
                    alignment: Alignment.center,
                    color: Colors.cyan[100 * (index % 9)],
                    child: Text('grid item $index'),
                  );
                },
                childCount: 20,
              ),
            ),
          ),
          //List
          SliverFixedExtentList(
            itemExtent: 50.0,
            delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
              //创建列表项
              return Container(
                alignment: Alignment.center,
                color: Colors.lightBlue[100 * (index % 9)],
                child: Text('list item $index'),
              );
            }, childCount: 50 //50个列表项
                ),
          ),
        ],
      ),
    );
  }
}

class _ExpandWidget extends StatefulWidget {
  var show = true;

  _ExpandWidget({this.show});

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _ExpandWidgetState();
  }
}

class _ExpandWidgetState extends State<_ExpandWidget> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    if (widget.show) {
      return Stack(
        overflow: Overflow.visible,
        children: <Widget>[
//          Image.asset('assets/images/cover_img.jpg', fit: BoxFit.fill, height: 100),
          Positioned(
            bottom: -18,
            left: 20,
            right: 20,
            child: Container(
              padding: EdgeInsets.only(bottom: 8, top: 8, left: 8, right: 8),
              child: Row(
                children: <Widget>[
                  Icon(Icons.search),
                  Text("请输入关键字查询"),
                ],
              ),
              decoration: new BoxDecoration(
                color: Color(0xFFFFFFFF),
                borderRadius: new BorderRadius.circular((5.0)),
              ),
//              padding: EdgeInsets.all(8.0),
            ),
          ),
        ],
        fit: StackFit.expand,
        alignment: Alignment.bottomCenter,
      );
    } else {
      return Container();
    }
  }
}
